import React, { useState, useEffect } from 'react'
import { connect } from 'react-redux'
import Home from '../../views/sandbox/home/Home'
import Nopermission from '../../views/sandbox/nopermission/Nopermission'
import RightList from '../../views/sandbox/right-manage/RightList'
import RoleList from '../../views/sandbox/right-manage/RoleList'
import UserList from '../../views/sandbox/user-manage/UserList'
import { Switch, Route, Redirect } from 'react-router-dom'
import NewsAdd from '../../views/sandbox/news-manage/NewsAdd'
import NewsDraft from '../../views/sandbox/news-manage/NewsDraft'
import NewsCategory from '../../views/sandbox/news-manage/NewsCategory'
import Audit from '../../views/sandbox/audit-manage/Audit'
import AuditList from '../../views/sandbox/audit-manage/AuditList'
import Unpublished from '../../views/sandbox/publish-manage/Unpublished'
import Published from '../../views/sandbox/publish-manage/Published'
import Sunset from '../../views/sandbox/publish-manage/Sunset'
import axios from 'axios'


// 功能路由--如预览页，更新页等
import NewsPreview from '../../views/sandbox/news-manage/NewsPreview'
import NewsUpdate from '../../views/sandbox/news-manage/NewsUpdate'
// 本地配置全部项目所需路由，注意配置此表，所用的路由路径，必须和后端返回的路径一一对应上
// 如果后期需要动态添加，则根据后端返回的路由字段，在LocalRouterMap下添加即可

import { Spin } from 'antd'
const LocalRouterMap = {
  "/home": Home,
  "/user-manage/list": UserList,
  "/right-manage/role/list": RoleList,
  "/right-manage/right/list": RightList,
  "/news-manage/add": NewsAdd,
  "/news-manage/draft": NewsDraft,
  "/news-manage/category": NewsCategory,
  // params传参
  "/news-manage/preview/:id": NewsPreview,
  // 更新新闻页
  "/news-manage/update/:id": NewsUpdate,

  "/audit-manage/audit": Audit,
  "/audit-manage/list": AuditList,
  "/publish-manage/unpublished": Unpublished,
  "/publish-manage/published": Published,
  "/publish-manage/sunset": Sunset
}

function NewsRouter(props) {

  const [BackRouteList, setBackRouteList] = useState([])

  // 获取项目所有的菜单级路由，功能级路由（不在菜单中出现，但是，点击页面某个按钮出现的路由页面，例如新闻预览，新闻更新）及按钮列表
  useEffect(() => {
    Promise.all([
      axios.get("/rights"),
      axios.get("/children"),
    ]).then(res => {
      console.log([...res[0].data, ...res[1].data])
      setBackRouteList([...res[0].data, ...res[1].data])
    })
  }, [])

  const { role: { rights } } = JSON.parse(localStorage.getItem("token"))

  const checkRoute = (item) => {
    // 当前用户在权限列表页面中，删除了某个页面权限，或则 让某个页面权限的配置项变为 0，再刷新以后，侧边栏都不会渲染这条-菜单路由
    // 这里做-预览新闻，和更新新闻时，需要进行功能级路由页面的判断，
    return LocalRouterMap[item.key] && (item.pagepermisson || item.routepermisson)
  }

  // 直接根据用户登录后，进行菜单权限的判断
  const checkUserPermission = (item) => {
    return rights.includes(item.key)
  }

  return (
    <Spin size="large" spinning={props.isLoading}>
      <Switch>
        {
          BackRouteList.map(item => {
            if (checkRoute(item) && checkUserPermission(item)) {
              return <Route path={item.key} key={item.key} component={LocalRouterMap[item.key]} exact />
            }
            return null
          }
          )
        }

        <Redirect from="/" to="/home" exact />
        {
          BackRouteList.length > 0 && <Route path="*" component={Nopermission} />
        }
      </Switch>
    </Spin>
  )
}


const mapStateToProps = ({ LoadingReducer: { isLoading } }) => ({
  isLoading
})

export default connect(mapStateToProps)(NewsRouter)